<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<style>
			.el-table--enable-row-hover .el-table__body tr:hover>td,
			.el-table__body tr.hover-row>td{background-color: white!important;}
		</style>
	</head>
	
	<body>
		<div id="app">
			<el-table :data="tableData3" :span-method="objectSpanMethod" height="500">
				<el-table-column label="" prop="keyname" width="40" fixed>
				</el-table-column>
				<el-table-column prop="date" label="" width="120" >
				</el-table-column>
				<el-table-column label="次分析维度2">
					<el-table-column v-for="(col,index) in cols" :key="col.id" :label="col.name">
							<template slot-scope="scope">
								<graph-component :row="scope.row.children[index]"></graph-component>
							</template>
					</el-table-column>
				</el-table-column>
			</el-table>
		</div>
		<script>
			Vue.component('graph-component', {
				props:['row'],
				template: '<div :id="\'myChart\' + row.id" style="width:100%;height:200px"></div>',
				mounted:function() {
					let myChart = echarts.init(document.getElementById('myChart'+this.row.id));
					let option = {
						radar: [{
							center: ['50%', '50%'],   
							startAngle:112.5,
							nameGap :5,
							splitNumber: 5,
							shape: 'circle',
							indicator:[
								{text: '337.5',max: 100},{text: '315.5',max: 100},
								{text: '292.5',max: 100},{text: '270',max: 100},
								{text: '247.5',max: 100},{text: '225',max: 100},
								{text: '202.5',max: 100},{text: '180',max: 100},
								{text: '157.5',max: 100},{text: '135',max: 100},
								{text: '112.5',max: 100},{text: '90',max: 100},
								{text: '67.5',max: 100},{text: '45',max: 100},
								{text: '22.5',max: 100},{text: '0',max: 100},
							],
							name: {
								fontSize :10,
								formatter: '{value}',
								textStyle: {
									color: '#72ACD1'
								}
							},
							axisLine: {
								lineStyle: {
									color: 'rgba(0, 0, 0, 0.2)'
								}
							},
							splitLine: {
								lineStyle: {
									color: 'rgba(0, 0, 0, 0.2)'
								}
							},
							splitArea: {
								areaStyle: {
									color: ['rgba(255,255,255,1)', 'rgba(255,255,255,1)']
								}
							}
						}],
						series: [{
							type: 'radar',
							data: [{
								value: this.row.data,
								symbol: 'none',
								lineStyle: {
									normal: {
										width: 0,
									}
								},
								areaStyle: {
									normal: {
										color: '#67C23A'
									}
								}
							}]
						}]
					}
					myChart.setOption(option)
				}
			})
			new Vue({
				el: '#app',
				data: function() {
					return {
						cols:[{
							id:1,name:'穿山 1#'
						},
						{
							id:2,name:'穿山 2#'
						},
						{
							id:3,name:'茶山 3#'
						},
						{
							id:4,name:'茶山 4#'
						}],
						tableData3: [{
							id:1,
							keyname: '次分析维度1',
							date: '2016-05-03',
							children:[
								{id:'a1',data:[5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80]},
								{id:'a2',data:[5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80]},
								{id:'a3',data:[5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80]},
								{id:'a4',data:[5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80]}
								]
						}, {
							id:2,
							keyname: '次分析维度1',
							date: '2016-05-02',
							children:[
								{id:'a5',data:[5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80]},
								{id:'a6',data:[5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80]},
								{id:'a7',data:[5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80]},
								{id:'a8',data:[5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80]}
								]
						}, {
							id:3,
							keyname: '次分析维度1',
							date: '2016-05-04',
							children:[
								{id:'a9',data:[5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80]},
								{id:'a10',data:[5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80]},
								{id:'a11',data:[5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80]},
								{id:'a12',data:[5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80]}
								]
						}],
						spanArr: [],
						pos: '',
						
					}
				},
				mounted: function() {
					// 组件创建完后获取数据，
					// 此时 data 已经被 observed 了
					this.getSpanArr(this.tableData3);
				},
				methods: {
					getSpanArr(data) {
						for (var i = 0; i < data.length; i++) {
							if (i === 0) {
								this.spanArr.push(1)
								this.pos = 0
							} else {
								// 判断当前元素与上一个元素是否相同
								if (data[i].keyname === data[i - 1].keyname) {
									this.spanArr[this.pos] += 1
									this.spanArr.push(0)
								} else {
									this.spanArr.push(1)
									this.pos = i
								}
							}
						}
					},
					objectSpanMethod({
						row,
						column,
						rowIndex,
						columnIndex
					}) {
						if (columnIndex === 0) {
							const _row = this.spanArr[rowIndex];
							const _col = _row > 0 ? 1 : 0
							return {
								rowspan: _row,
								colspan: _col
							}
						}
					}
				},
			})
		</script>
	</body>

</html>
